<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jPage Demo 1</title>
<style>
body,div {
	font-size:13px;
	font-family:Verdana;
}

.pgContainer {
	background-color:#F9F9F9;
	padding:10px;
	line-height:20px;
}

#pagetest5 .pgContainer {
	color:#93A5B3;
}

hr {
	margin:10px 0 10px 0;
	border:0;
	border-top:1px dashed #CCCCCC;
	height:0;
}

h3 {
	margin:5px 0;
	font-size:14px;
}

.orderid {
	width:20px;
	display:inline-block;
} 
</style>

<!--默认主题-->
<link href="jpage/theme/default/css/jpage.css" type="text/css" rel="stylesheet">
<!--黑色主题-->
<link href="jpage/theme/black/css/jpage.css" type="text/css" rel="stylesheet">
<!--白色主题-->
<link href="jpage/theme/white/css/jpage.css" type="text/css" rel="stylesheet">
<!--蓝色主题-->
<link href="jpage/theme/blue/css/jpage.css" type="text/css" rel="stylesheet">
<!--圆形主题-->
<link href="jpage/theme/rotundity/css/jpage.css" type="text/css" rel="stylesheet">

<script language="javascript" src="jquery.js"></script>
<script language="javascript" src="cookie/jquery.cookie.js"></script>
<script language="javascript" src="jpage/jquery.jpage.js"></script>

<script language="javascript">
<!--
$(document).ready(
	function(){
		//demo1带参数
		var param = {
			'money':encodeURI($('#money').val())
		};
		//$('#pagetest').jpage({totalRecord:96,proxyUrl:'dataproxy.jsp',groupSize:4,barPosition:'bottom',ajaxParam:param});
		
		//demo2带初始数据
		var initData = [
			'<span class="orderid">{id}.</span> 多国华人华侨举行反“藏独”游行 视频 专题 <br/>',
			'<span class="orderid">{id}.</span> 组图：西藏警方悬赏通缉打砸抢烧疑犯 <br/>',
			'<span class="orderid">{id}.</span> 我国改革开放30年成为博鳌论坛热议焦点 专题 <br/>',
			'<span class="orderid">{id}.</span> 奥运圣火抵达阿曼马斯喀特 华人护圣火 视频 <br/>',
			'<span class="orderid">{id}.</span> 请参与全球华人反分裂护圣火签名活动 <br/>',
			'<span class="orderid">{id}.</span> 刘兆玄将任台“行政院长” 江丙坤任海基会董事长<br/>',
			'<span class="orderid">{id}.</span> 国家粮食局长撰文解读粮油安全 广东成第一缺粮省<br/>',
			'<span class="orderid">{id}.</span> 湖北当阳女市长撞死男童续 交警部门被指不作为 <br/>',
			'<span class="orderid">{id}.</span> 香港金像奖揭晓 《投名状》揽八项大奖 视频集 <br/>',
			'<span class="orderid">{id}.</span> 江西鄱阳高速路员工报警被民警击毙(组图) <br/>',
			'<span class="orderid">{id}.</span> 清华大学教授秦晖建议深圳率先兴建贫民区 <br/>',
			'<span class="orderid">{id}.</span> 视频：实拍南京女大学生裹床单在食堂打饭 <br/>',
			'<span class="orderid">{id}.</span> 博客：培养1个飞行员多少钱 黄健翔：足球记者敢说真话 <br/>',
			'<span class="orderid">{id}.</span> 17时成龙李连杰聊《功夫之王》 MLTR乐队聊奥运歌曲 <br/>',
			'<span class="orderid">{id}.</span> 乐库全新改版 全方位视听体验 宇多田光 许飞 张惠妹 <br/>',
			'<span class="orderid">{id}.</span> 多国华人华侨举行反“藏独”游行 视频 专题 <br/>',
			'<span class="orderid">{id}.</span> 组图：西藏警方悬赏通缉打砸抢烧疑犯 <br/>',
			'<span class="orderid">{id}.</span> 我国改革开放30年成为博鳌论坛热议焦点 专题 <br/>',
			'<span class="orderid">{id}.</span> 奥运圣火抵达阿曼马斯喀特 华人护圣火 视频 <br/>',
			'<span class="orderid">{id}.</span> 请参与全球华人反分裂护圣火签名活动 <br/>',
			'<span class="orderid">{id}.</span> 刘兆玄将任台“行政院长” 江丙坤任海基会董事长<br/>',
			'<span class="orderid">{id}.</span> 国家粮食局长撰文解读粮油安全 广东成第一缺粮省<br/>',
			'<span class="orderid">{id}.</span> 湖北当阳女市长撞死男童续 交警部门被指不作为 <br/>',
			'<span class="orderid">{id}.</span> 香港金像奖揭晓 《投名状》揽八项大奖 视频集 <br/>',
			'<span class="orderid">{id}.</span> 江西鄱阳高速路员工报警被民警击毙(组图) <br/>',
			'<span class="orderid">{id}.</span> 清华大学教授秦晖建议深圳率先兴建贫民区 <br/>',
			'<span class="orderid">{id}.</span> 视频：实拍南京女大学生裹床单在食堂打饭 <br/>',
			'<span class="orderid">{id}.</span> 博客：培养1个飞行员多少钱 黄健翔：足球记者敢说真话 <br/>',
			'<span class="orderid">{id}.</span> 17时成龙李连杰聊《功夫之王》 MLTR乐队聊奥运歌曲 <br/>',
			'<span class="orderid">{id}.</span> 乐库全新改版 全方位视听体验 宇多田光 许飞 张惠妹 <br/>',
			'<span class="orderid">{id}.</span> 宇多田光 许飞 张惠妹乐库全新改版 <br/>',
			'<span class="orderid">{id}.</span> 全方位视听体验 乐库全新改版 全方位视听体验 宇多田光 许飞 张惠妹 <br/>',
			'<span class="orderid">{id}.</span> 多国华人华侨举行反“藏独”游行 视频 专题 <br/>',
			'<span class="orderid">{id}.</span> 组图：西藏警方悬赏通缉打砸抢烧疑犯 <br/>',
			'<span class="orderid">{id}.</span> 我国改革开放30年成为博鳌论坛热议焦点 专题 <br/>',
			'<span class="orderid">{id}.</span> 奥运圣火抵达阿曼马斯喀特 华人护圣火 视频 <br/>',
			'<span class="orderid">{id}.</span> 请参与全球华人反分裂护圣火签名活动 <br/>',
			'<span class="orderid">{id}.</span> 刘兆玄将任台“行政院长” 江丙坤任海基会董事长<br/>',
			'<span class="orderid">{id}.</span> 国家粮食局长撰文解读粮油安全 广东成第一缺粮省<br/>',
			'<span class="orderid">{id}.</span> 湖北当阳女市长撞死男童续 交警部门被指不作为 <br/>'
		];

		/*
		$('#pagetest2').jpage(
			{
				themeName:'white',													//主题名称
				openCookies:false,													//关闭cookies
				showMode:'full',													//显示模式
				totalRecord:96,														//记录总数
				dataBefore:'',														//循环前内容
				dataStore:initData,													//循环数据初始值
				dataAfter:'',														//循环后内容
				groupSize:5,														//分组大小
				proxyUrl:'dataproxy.jsp',											//代理页地址
				perPage:8,															//每页记录数
				barPosition:'bottom',												//分页条位置
				ajaxParam:															//参数传递，自定义参数
					{
						appid:'1',
						webname:'jcms24'
					}
			}
		);
		*/
		
		//上下工具栏
		//$('#pagetest3').jpage({totalRecord:96,proxyUrl:'dataproxy.jsp',groupSize:3,perPage:20,barPosition:'top&bottom'});
		
		//纯静态
		$('#pagetest4').jpage({totalRecord:40,dataStore:initData,groupSize:0});
		
		//黑色主题，主题可以自定义，在theme目录下建立以主题名命名的文件夹，css参考别的主题
		$('#pagetest5').jpage({themeName:'black',totalRecord:40,groupSize:0,dataStore:initData,showMode:'full'});

		//白色主题
		$('#pagetest6').jpage({themeName:'white',totalRecord:40,groupSize:0,dataStore:initData,showMode:'full'});
		
		//蓝色主题
		$('#pagetest7').jpage({themeName:'blue',totalRecord:40,groupSize:0,dataStore:initData,showMode:'full'});
		
		//圆形主题
		$('#pagetest8').jpage({themeName:'rotundity',totalRecord:40,groupSize:0,dataStore:initData,showMode:'full'});
		
		//完全模式
		$('#pagetest9').jpage({totalRecord:40,dataStore:initData,groupSize:0,showMode:'full'});
		
		//普通模式
		$('#pagetest10').jpage({totalRecord:40,dataStore:initData,groupSize:0,showMode:'normal'});
		
		//精简模式
		$('#pagetest11').jpage({totalRecord:40,dataStore:initData,groupSize:0,showMode:'mini'});

		//禁止Cookie
		$('#pagetest12').jpage({totalRecord:40,dataStore:initData,groupSize:0,showMode:'full',openCookies:false});
	}
)
//-->
</script>
</head>
<body>
<h3 style="color:red;">以下没有显示出来的例子，在代码中注释掉了，因为需要动态代理页的支持，如果需要查看，请将代码中的注释去掉</h3>
<hr/>
<div style="width:750px;">
	<h3>Demo1（底部显示工具条）:</h3>
	<input type="text" id="money" value="测试参数"/>
	<div id="pagetest"></div>
	<hr/>
	<h3>Demo2（头部显示工具条，带初始化数据）:</h3>
	<div id="pagetest2"></div>
	<hr/>
	<h3>Demo3（头部底部显示工具条）:</h3>
	<div id="pagetest3"></div>
	<hr/>
	<h3>Demo4（纯静态分页）:</h3>	
	<div id="pagetest4"></div>
	<hr/>
	<h3>Demo5（黑色主题）:</h3>	
	<div id="pagetest5"></div>
	<hr/>
	<h3>Demo6（白色主题）:</h3>	
	<div id="pagetest6"></div>
	<hr/>
	<h3>Demo7（蓝色主题）:</h3>	
	<div id="pagetest7"></div>
	<hr/>
	<h3>Demo8（圆形主题）:</h3>	
	<div id="pagetest8"></div>
	<hr/>
	<h3>Demo9（完全模式）:</h3>	
	<div id="pagetest9"></div>
	<hr/>
	<h3>Demo10（普通模式）:</h3>	
	<div id="pagetest10"></div>
	<hr/>
	<h3>Demo11（精简模式）:</h3>
	<div id="pagetest11"></div>
	<hr/>
	<h3>Demo12（禁止cookie）:</h3>
	<div id="pagetest12"></div>
</div>
</body>
</html>